(function(Vue) {
    const instances = [];
  
    function createInstance(options) {
      const container = document.createElement('div');
      document.body.appendChild(container);
  
      const app = Vue.createApp({
        render() {
          return Vue.h(MessageComponent, options);
        }
      });
  
      app.config.compilerOptions.isCustomElement = tag => tag === 'transition'; // Handle <transition> element
  
      const vm = app.mount(container);
      instances.push(vm);
  
      vm.show();
  
      vm.$el.addEventListener('animationend', () => {
        if (!vm.visible.value) {
          app.unmount();
          document.body.removeChild(container);
          instances.splice(instances.indexOf(vm), 1);
        }
      });
    }
  
    function Message(options) {
      const mergedOptions = {
        type: 'info',
        message: '',
        ...options
      };
  
      createInstance(mergedOptions);
    }
  
    ['success', 'warning', 'error'].forEach(type => {
      Message[type] = (message) => {
        Message({ type, message });
      };
    });
  
    Vue.createApp({
      mounted() {
        this.$message = Message;
      }
    }).use({
      install(app) {
        app.config.globalProperties.$message = Message;
      }
    }).mount('#app');
  
  })(Vue);